<template>
  <svg :class="className" :style="{ width, height: _height }">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps({
  name: { type: String, require: true },
  width: { type: String, default: '16px' },
  height: { type: String },
  className: { type: String },
})
const _height = computed(() => {
  return props.height ? props.height : props.width
})
const iconName = computed(() => {
  return `#${props.name}`
})
</script>
